<template>
  <div class="circle-button" :style="{ width: props.size + 'px', height: props.size + 'px' }">
    <img
      class="icon"
      :src="iconEntity.dUrl"
      alt="tag"
      :style="{
        fontSize: props.iconSize + 'px',
        width: props.iconSize + 'px',
        height: props.iconSize + 'px'
      }"
    />
  </div>
</template>

<script setup lang="ts">
import { CommonTypes } from '@globalTypes/global'

interface Props {
  iconEntity: CommonTypes.IconEntity,
  size?: number,
  iconSize?: number
}

const props = withDefaults(defineProps<Props>(), {
  size: 40,
  iconSize: 20
})
</script>

<style scoped>
.circle-button {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  border: none;
  padding: 0;
  color: white;
}

.circle-button:hover {
  background-color: #f0f0f011;
}

.circle-button:active {
  background-color: #f0f0f00c;
}
</style>
